<template>

        <view class="openshop">
            <form @submit="handleSubmit">
                <view class="group">
                        <view class="label">商品名称</view>
                        <view class="input-item">
                            <input type="text"  :value="cardName" placeholder-class="placeholder" placeholder="请输入商品名称限100中文字符" maxlength="100" class="input" name="cardName" />
                        </view>
                </view>

                 <!-- <view class="group">
                        <view class="label">商品品牌</view>
                        <view class="input-item">
                            <input type="text" :value="cardBrand"  placeholder-class="placeholder" placeholder="请输入文章标签限6字以内" maxlength="6" class="input" name="" />
                        </view>
                </view> -->


          

                      <view class="group">
                        <view class="label">商品品类</view>
                        <view class="input-picker">
                            <view class="picker-text" >{{typeName}}</view>    
                            <picker  :value="id" 
                                     :range="BeautyTypes" 
                                     range-key="categoryName"
                                    @change="changeHandle">
                                    <view class="picker">
                                    
                                    
                                        <view ><image class="allow-down" src="/static/images/allow-down.png" /></view>  
                                    </view>     
                            </picker>
                         </view>
                      </view>



            
                  <view class="upimag-group">
                      <view class="top">
                        <view class="label">商品图片（数量要求1~5张）</view>
                        
                      </view>   

                      <view class="bottom">
                       
                        <view class="input-item">
                         
                            <view>
                            
                                <UpImag maxCount="5" :images="defaultImages" @setImages="getImag"/>
                            </view>    
                        </view>

                      </view>  
                </view>

                  <view class="group">
                        <view class="label">库存数量</view>
                        <view class="input-item">
                            <input type="number" name="cardSum" :value="cardSum"  placeholder-class="placeholder" placeholder="请输入商品数量" class="input"  />
                        </view>
                </view>

                  <view class="group">
                        <view class="label">售卖单位</view>
                        <view class="input-item">
                            <input type="text"  name="cardUnit" :value="cardUnit"  placeholder-class="placeholder" placeholder="请输入售卖单位" class="input"  />
                        </view>
                </view>



                  <view class="group">
                        <view class="label">商品原价</view>
                        <view class="input-item">
                            <input type="text" name="cardOriginalprice" :value="cardOriginalprice" placeholder-class="placeholder" placeholder="请输入商品原价" class="input"/>
                        </view>
                 </view>


                  <view class="group">
                        <view class="label">商品现价</view>
                        <view class="input-item">
                            <input type="text" name="cardCurrentprice" :value="cardCurrentprice" placeholder-class="placeholder" placeholder="请输入商品现价" class="input"/>
                        </view>
                 </view>


                   <view class="group">
                        <view class="label">商品保障</view>
                         <view class="input-item">
                            <input type="text" :value="cardGuarantee" placeholder-class="placeholder" name="cardGuarantee" placeholder="请输入商品保障" class="input" />
                        </view>
                      
                 </view>

                   <!-- <view class="group">
                        <view class="title">显示已售数</view>
                        <switch type="switch" color="$my-main-color" class="switch" checked="{{true}}"/>
                        
                 </view> -->

                   <view class="group">
                        <view  class="title">热卖商品（最多可设置3个)</view>
                        <switch type="switch" color="#F1017F" :checked="recommend" name="recommend"/>
                        
                 </view>
                  
                     <view class="group">
                        <view  class="title">商品上架</view>
                        <switch type="switch" color="#F1017F" class="switch" :checked="cardState" name="cardState" />
                        
                 </view>


              <view class="editor-group">
                        <view class="label">商品描述</view>
                        
                                <MyEditor :editorContent="defaultCardDetailed"  @getEditor="getEditor" />
                        

                    </view>



             
                
              

                <button class="submit" form-type="submit" >保存</button>

              
             </form>  

           
        </view>
    
</template>
<script lang="ts">

import UpImag from '@components/upImag/index.vue'
import MyEditor from '@components/myEditor/index.vue'
import {postBeautyCardAdd,postBeautyCardSelect,postBeautyCardCategoryType} from '@/request/actions'
import {Vue, Component , Emit} from 'vue-property-decorator';


@Component({
    components:{
        UpImag,
        MyEditor
    
    }
})
export default class extends Vue{
   
        cardName:string = '';
        cardState:number|string = 1;
        recommend:number|string = 0;
        cardGuarantee:string = '7天无理由退款';
        cardCurrentprice:string ='';
        cardOriginalprice:string ='';
        cardSum:string|number ='';
        defaultImages:Array<any> = [];
        defaultCardDetailed:string ='';
        cardId:any = null;
        images:Array<any> = [];
        cardDetailed:string = "";
        BeautyTypes:Array<any> = [];
        cardCategory:string = '';
        typeName:string = '选择商品品类'
        salonId:string|number = '';
        cardUnit:string = '1';

        handleSubmit(e:any){
               
                let globalData = getApp().globalData;

                let {
                    cardCurrentprice,
                    cardGuarantee,
                    cardName,
                    cardOriginalprice,
                    cardState,
                    cardSum,
                    recommend,
                    cardUnit
                } = e.detail.value;
                 let cardCategory = this.cardCategory;
                let cardBelongtoid = globalData.salonId;
                let images = this.images;
                let cardDetailed = this.cardDetailed.length == 0?this.defaultCardDetailed:this.cardDetailed;
                let cardId = this.cardId;
                cardState = cardState * 1;
                recommend = recommend * 1;

                 if(cardName.length == 0){
                   return uni.showToast({
                        title: '请输入商品名称限100中文字符',
                        icon: 'none',
                        duration: 2000
                    })
                } else if(images.length < 1 ){
                    return uni.showToast({
                        title: '请选择1~5张商品图片',
                        icon: 'none',
                        duration: 2000
                    })
                }else if(cardSum.length == 0){
                     return uni.showToast({
                        title: '请输入商品数量',
                        icon: 'none',
                        duration: 2000
                    })
                }else if(!(/\d/g.test(cardOriginalprice))){
                     return uni.showToast({
                        title: '请输入商品原价',
                        icon: 'none',
                        duration: 2000
                    })
                }else if(!(/\d/g.test(cardCurrentprice))){
                     return uni.showToast({
                        title: '请输入商品现价',
                        icon: 'none',
                        duration: 2000
                    })
                }else if(cardOriginalprice*1 < cardCurrentprice*1){

                     return uni.showToast({
                        title: '商品原价须大于等于现价',
                        icon: 'none',
                        duration: 2000
                    })

                }else if(cardDetailed.length == 0){
                     return uni.showToast({
                        title: '请输入商品描述',
                        icon: 'none',
                        duration: 2000
                    })
                }else if(cardCategory.length == 0){
                    return uni.showToast({
                        title: '选择商品品类',
                        icon: 'none',
                        duration: 2000
                    })
                }

           
                postBeautyCardAdd({
                    cardCategory,
                    cardCurrentprice,
                    cardGuarantee,
                    cardName,
                    cardOriginalprice,
                    cardState,
                    cardSum,
                    cardBelongtoid,
                    cardDetailed,
                    cardId,
                    listImg:images,
                    recommend,
                    cardUnit
                }).then((r:any)=>{
                    let {data:res} = r;
                    let content = cardId?"修改商品成功":"添加商品成功"
                    if(res.status == 200){
                              return uni.showModal({
                                    content:content,
                                    showCancel:false,
                                    success:()=>{
                                         wx.navigateBack();
                                    }
                                })
                             
                    }
                })


        }

       
         getImag(l:any){

            this.images = l;
           
        }
    
    
         getEditor(res:any){
            let {html,text} = res;

     
          
            if(text.length != 0 ){
                 this.cardDetailed = html;
            }else{
                this.cardDetailed = '';
            }
          
        }
    

    changeHandle(e:any){
        let i = e.detail.value;

        this.typeName = this.BeautyTypes[i].categoryName;
        this.cardCategory = this.BeautyTypes[i].id;


        console.log(e.detail.value);
    }

     
    onLoad(query:any){
            let {cardId} = query;
            let title = cardId?'编辑商品':'添加商品';
           
            wx.setNavigationBarTitle({title })

            this.cardId = cardId;
            this.cardDetailed = '';


            if(cardId){
                postBeautyCardSelect({cardId}).then((r:any)=>{
                       let {data:res} = r;
                       if(res.status == 200){
                         

                          ({
                              cardName:this.cardName,
                              cardState:this.cardState,
                              cardGuarantee:this.cardGuarantee,
                              cardCurrentprice:this.cardCurrentprice,
                              cardOriginalprice:this.cardOriginalprice,
                              cardSum:this.cardSum,
                              cardDetailed:this.defaultCardDetailed,
                              cardCategorynum:this.cardCategory,
                              recommend:this.recommend,
                              cardCategory:this.typeName,
                              cardUnit:this.cardUnit
                          }=res.data);
                          
                          let listImg = res.data.listImg;


                            if(listImg.length == 0){
                                 this.defaultImages = [{imagesPath:res.data.cardCarPhoto}];
                                 this.images = [res.data.cardCarPhoto];
                            }else{

                                    this.defaultImages = listImg.map((item:any)=>{

                                        this.images.push(item.picturePicturelink)
                                        return {imagesPath:item.picturePicturelink}
                                    });
                                    

                                   

                            }

                         
                   
                       }

                      
                })
            }

            postBeautyCardCategoryType().then((r:any)=>{

                let {data:res} = r;
                if(res.status == 200){
                    this.BeautyTypes = res.data;
                    
                    let o = (res.data.find((item:any)=>item.id == this.cardCategory));
                 
                    if(o){
                        this.typeName = o.categoryName
                    }
                
                  
                }
             

            })
    }

  
        
  
}
</script>
<style lang="scss">
  @import './_static/scss/index.scss';
</style>